<script>
import { mapGetters,mapState,mapMutations } from 'vuex';
export default {
    name: 'MySon1',
    methods: {
      handleDel () {
        // this.$store.state.count--
        this.$store.commit('subCount',5)
      },

      // updateUser () {
      //   // $store.commit('模块名/mutation名', 额外传参)
      //   this.$store.commit('user/setUser', {
      //     name: 'dark',
      //     age: 18
      //   })
      // }, 
      // updateDesc () {
      //   this.$store.commit('setting/setDesc', '巴拉巴拉巴拉巴拉')
      // }

      // 同上
      // 分模块的映射
      ...mapMutations('setting', ['setDesc']),
      ...mapMutations('user', ['setUser']),

    },

    computed :{
      ...mapGetters(['filterList']),
      ...mapState('setting',['desc','userInfo'])

      // desc : xxxxx
    }

    // modules 的获取方式:
    // 直接用 $store
    // $store.state.user.userInfo.name  ---> jack
    // ...mapState('setting',['desc'])
  }
</script>

<template>
  <div class="box">
    <h2>我是Son2  组件</h2>
    这是Vuex传来得值 : <label></label>

    <br>

    <button @click="handleDel">值 - 5</button>

    <br>

    <div>  {{ filterList }}</div>

    <br>

    userInfo : {{ $store.state.user.userInfo.name }} -- {{ $store.state.user.userInfo.age }}

    <br>
    {{ desc }} --- {{ userInfo.name }}

    <br>

    <button @click="setUser({ name: 'dark', age: 80 })">更新个人信息</button> 
    <button @click="setDesc('啦啦啦啦啦啦啦啦啊啦')">更新描述信息 desc</button>
  </div>
</template>

<style scoped lang="scss">

</style>
